<template>
  <div class style="height: 100%;padding: 20px;">
    <table class="header-table" :style="headTableStyle">
      <colgroup>
        <col width="103px"/>
        <col width="276px"/>
        <col width="224px"/>
        <col width="120px"/>
        <col width="364px"/>
      </colgroup>
      <tbody>
      <tr style="text-align: center">
        <td>告警等级</td>
        <td>告警时间</td>
        <td>告警来源</td>
        <td>异常数值</td>
        <td style="text-align: left;">告警内容</td>
      </tr>
      </tbody>
    </table>
    <scroll-bar
      class="warp"
      :style="wrapStyle"
      :scroll-track-style="scrollTrackStyle"
      :scroll-bar-style="scrollBarStyle"
    >
      <table class="r-table" :style="rTableStyle">
        <colgroup>
          <col width="103px"/>
          <col width="276px"/>
          <col width="224px"/>
          <col width="98px"/>
          <col width="364px"/>
        </colgroup>
        <tbody>
          <tr v-for="(item, index) in list" :key="index">
            <td>
              <span class="tag-container" :style="getLevelStyle(item.level)">
                {{ item.level }}
              </span>
            </td>
            <td>{{ item.time }}</td>
            <td>{{ item.source }}</td>
            <td :style="getNumStyle(item.num)">{{ item.num }}</td>
            <td style="text-align: left">{{ item.content }}</td>
          </tr>
        </tbody>
      </table>
    </scroll-bar>
  </div>
</template>

<script>
import defaultmixins from '@/mixins/bigScreen/defaultmixins'
import scrollBar from 'vue-scroll-bar'
export default {
  name: 'AlertTable',
  components: {
    scrollBar
  },
  mixins: [defaultmixins],
  data() {
    return {
      scrollTrackStyle: {
        backgroundColor: 'transparent'
      },
      scrollBarStyle: {
        backgroundColor: '#204269',
        borderRadius: '5px',
        width: '10px'
      },
      list: [
        {
          level: '一级',
          time: '2019-11-28 12:22:32',
          source: '三厂厂区某设备处',
          num: '↑3278',
          content: '设备温度过高，潜在风险较高'
        },
        {
          level: '二级',
          time: '2019-11-28 12:22:32',
          source: '二厂厂区',
          num: '↓16789',
          content: '压力过高，存在一定风险'
        },
        {
          level: '三级',
          time: '2019-11-28 12:22:32',
          source: '三厂厂区某设备处',
          num: '↓2637',
          content: '设备温度过高，潜在风险较高'
        },
        {
          level: '二级',
          time: '2019-11-28 12:22:32',
          source: '三厂厂区某设备处',
          num: '↑3278',
          content: '设备温度过高，潜在风险较高'
        },
        {
          level: '三级',
          time: '2019-11-28 12:22:32',
          source: '二厂厂区',
          num: '↓2343',
          content: '设备温度过高，潜在风险较高'
        },
        {
          level: '三级',
          time: '2019-11-28 12:22:32',
          source: '三厂厂区某设备处',
          num: '↓3278',
          content: '设备温度过高，潜在风险较高'
        },
        {
          level: '二级',
          time: '2019-11-28 12:22:32',
          source: '二厂厂区',
          num: '↑16789',
          content: '压力过高，存在一定风险'
        },
        {
          level: '一级',
          time: '2019-11-28 12:22:32',
          source: '三厂厂区某设备处',
          num: '↑2637',
          content: '设备温度过高，潜在风险较高'
        },
        {
          level: '二级',
          time: '2019-11-28 12:22:32',
          source: '三厂厂区某设备处',
          num: '↓3278',
          content: '设备温度过高，潜在风险较高'
        },
        {
          level: '二级',
          time: '2019-11-28 12:22:32',
          source: '二厂厂区',
          num: '↑2343',
          content: '设备温度过高，潜在风险较高'
        },
        {
          level: '一级',
          time: '2019-11-28 12:22:32',
          source: '三厂厂区某设备处',
          num: '↓3278',
          content: '设备温度过高，潜在风险较高'
        }
      ]
    }
  },
  methods: {
    getNumStyle(num) {
      let color = ''
      if (num.indexOf('↑') >= 0) {
        color = '#E4847A'
      } else {
        color = '#ECAE33'
      }
      return {
        color: color
      }
    },
    getLevelStyle(level) {
      let color = ''
      switch (level) {
        case '一级':
          color = '#E4847A'
          break
        case '二级':
          color = '#EDAF33'
          break
        case '三级':
          color = '#E4E26A'
          break
      }
      return {
        borderColor: `${color}`,
        color: `${color}`
      }
    }
  },
  computed: {
    wrapStyle() {
      return {
        height: 260 * this.$root.setting.scale + 'px'
      }
    },
    rTableStyle() {
      return {
        fontSize: 22 * this.$root.setting.scale + 'px'
      }
    },
    headTableStyle() {
      return {
        fontSize: 22 * this.$root.setting.scale + 'px'
      }
    }
  }
}
</script>

<style lang="scss" scoped>
  .warp{
    overflow: hidden;
  }

  .r-table {
    border-collapse: collapse;
    background: #102e56;
    border-spacing: 0;
    width: 100%;
    font-family:PingFang SC;
    font-weight:400;
    color:rgba(160,200,219,1);
    tr {
      height: 44px;
      &:nth-child(odd) {
        background: #102e56;
      }
      &:nth-child(even) {
        background: #102445;
      }

      td {
        text-align: center;
      }
    }

    .tag-container {
      padding: 4px 12px;
      border: 1px solid #FFFFFF;
      font-size: 14px;
      height: 26px;
      width: 60px;
      border-radius:5px;
    }
  }

  .header-table {
    background: #0C3462;
    border-collapse: collapse;
    border-spacing: 0;
    tr {
      height: 40px;
      td {
        font-family:PingFang SC;
        font-weight:400;
        color:rgba(255,255,255,1);
      }
    }
  }
</style>
